<script>
import UserAccountInterrelationPopup from "../user-account-interrelation-popup/user-account-interrelation-popup.vue";

export default {
  name: "chat-input-box",
  components: {UserAccountInterrelationPopup},
  props: [
    "dialogId",
  ],
  data() {
    return {
      bindParam: {
        userAccountId:"",
        fileIdsOfImages:[],
        text: "",
      },
      loading: false,
      loadingFile: false,
      requestParam: {
        dialogId: "",
        items:[]
      },
    };
  },
  methods: {
    interrelationSelect(userAccount){
      this.bindParam.userAccountId = userAccount.id;
      console.log("测试", userAccount.id);
      this.sendMessage();
    },
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
        success: (res) => {
          // 获取图片的临时路径
          const tempFilePaths = res.tempFilePaths;
          let path = tempFilePaths[0];
          console.log(path);
          this.loadingFile = true;
          this.$request.uploadFile({
            data:{
              file: path,
              groupCode: "functionalChat",
            },
            stateSuccess: (res1) => {
              this.loadingFile = false;

              this.bindParam.fileIdsOfImages.push(res1.data.id);
              this.sendMessage();
            },
          });

        },
      });
    },
    toSummary() {
      this.$emit("toSummary");
    },
    change() {
      this.$emit("change");
    },
    input($event){
      this.bindParam.value = $event.detail.text;
      this.change();
    },
    async sendMessage() {
      if (this.loading) {
        uni.showToast({
          title: this.$i18n.zhToGlobal("正在发送中"),
          icon: "none",
        });
        return;
      }
      this.loading = true;
      this.requestParam.dialogId = this.dialogId;
      this.requestParam.items = [];
      if (this.bindParam.fileIdsOfImages
          && this.bindParam.fileIdsOfImages.length > 0) {
        this.requestParam.items.push({
          type: "image:id",
          content: this.bindParam.fileIdsOfImages,
        });
      }
      if (this.bindParam.text) {
        this.requestParam.items.push({
          type: "text",
          content: this.bindParam.text,
        });
      }
      if (this.bindParam.userAccountId) {
        this.requestParam.items.push({
          type: "userAccount:id",
          content: this.bindParam.userAccountId,
        });
      }
      this.$emit("sendMessage", this.requestParam);
      await this.$request.post("/functional-chat-web/dialogMessage/sendMessageBySelf",{
        data: this.requestParam,
      }).then((res) => {
        this.bindParam.userAccountId = "";
        this.bindParam.text = "";
        this.bindParam.fileIdsOfImages = [];
        this.$emit("sendMessageSuccess", res.data);
      }).catch((err) => {
        uni.showToast({
          title: err.errMsg,
          icon: "none",
        });
        this.$emit("sendMessageError", err);
      });
      this.loading = false;


    },
  },
}
</script>

<template>
  <view style="width:100%;position: relative">

    <view
        style="display: inline-block;width: calc(100% - 100rpx)"
        class="chat-footer-input-container">
          <textarea
              :adjust-position="false"
              auto-height
              :disabled="loading"
              v-model="bindParam.text"
              @input="input"
              :placeholder="$i18n.zhToGlobal('请输入')"
              maxlength="99999"
              class="chat-footer-input"/>
    </view>
    <view class="chat-footer-send-container btn"
          style="display: inline-block;width: 100rpx;
            text-align: center;position: relative">
        <image
          v-if="loading||loadingFile"
          class="icon icon-loading"
          :src="$kt.file.byPath('icon/plan.svg')">

        </image>
        <image
            @click="sendMessage()"
            v-else-if="bindParam.text"
            class="icon"
            :src="$kt.file.byPath('icon/plan.svg')"
        ></image>
        <image
            v-else-if="!bindParam.text"
            class="icon"
            style="opacity: .5"
            :src="$kt.file.byPath('icon/plan.svg')"
        ></image>
    </view>

    <view style="box-sizing: border-box;color:#666666;height: 60rpx">
      <u-grid :col="4">
        <u-grid-item
            @click="chooseImage"
        >
          <!--            {{$i18n.zhToGlobal('图片')}}-->
          <image
              class="b-icon"
              :src="$kt.file.byPath('icon/image.svg')"></image>
        </u-grid-item>
        <u-grid-item
            @click="$refs.userAccountInterrelationPopup.open()">
          <image
              class="b-icon"
              :src="$kt.file.byPath('icon/interrelation.svg')"></image>
        </u-grid-item>
        <u-grid-item
            @click="toSummary">
          <image
              class="b-icon"
              :src="$kt.file.byPath('icon/robot_black.svg')"></image>
        </u-grid-item>
        <u-grid-item
            @click="toChange">
          <image
              class="b-icon"
              :src="$kt.file.byPath('icon/change.svg')"></image>

        </u-grid-item>
      </u-grid>
    </view>
    <view style="height: 20rpx"></view>
    <user-account-interrelation-popup
        @select="interrelationSelect"
    ref="userAccountInterrelationPopup"
    ></user-account-interrelation-popup>
  </view>
</template>

<style scoped lang="scss">

.chat-footer-input-container {
  padding: 20rpx;
  box-sizing: border-box;
}

.chat-footer-input {
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
  padding: 10rpx;
  border-radius: 10rpx;
  max-height: 200rpx;
  // 超出可拖动
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;

  &::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
  }
}

// 让textarea 高度自适应
.chat-footer-input {
  height: 100%;
  width: 100%;
  padding: 15rpx;
}


.btn:active {
  opacity: .8;
}

.chat-footer-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  //background-color: #FFFFFF;
  padding-top: 40rpx;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .5) 10%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 1) 100%);

}

.b-icon {
  width: 40rpx;
  height: 40rpx;
}

.icon{
  position: absolute;
  width: 50rpx;
  height: 50rpx;
  left:50%;
  transform: translate(-50%,calc(-100% - 10rpx));
}

.icon-loading{
  // 颜色反转
  //filter: invert(1);
  // 动画
  animation: loading-icon-ani-in-page-chat 1s linear infinite;
}

@keyframes loading-icon-ani-in-page-chat {
  0% {
    transform:  translate(-50%,calc(-100% - 10rpx)) scale(1);
  }
  50% {
    transform:  translate(-50%,calc(-100% - 10rpx)) scale(.3);
  }
  100% {
    transform:  translate(-50%,calc(-100% - 10rpx)) scale(1);
  }
}
</style>